<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import SetWeChat from './SetWeChat.vue'

import * as workPlaceWeChatApi from '@/api/workPlaceWeChat'
import * as userApi from '@/api/user'

import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
// console.log('userStore=', userStore.userInfo.userName)

const setWeChatRef = ref()

const open = ref<boolean>(false)

const showModal = () => {
  open.value = true
  formState.code = ''

  console.log('formState=', userStore.userInfo)
  formState.username = userStore.userInfo.userName as string
}

const handleOk = async () => {
  let params = {
    userName: formState.username,
    code: formState.code,
  }
  try {
    let { state, data, message: msg } = await workPlaceWeChatApi.verifyRegSms(params)
    if (state === 200) {
      if (data) {
        open.value = false
        setWeChatRef.value.showModal()
      } else {
        message.error('验证码输入错误~')
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('操作失败，请刷新后重试~')
  }
}

defineExpose({
  showModal,
})

interface FormState {
  username: string
  code: string
}

const formState = reactive<FormState>({
  username: '',
  code: '',
})

const loginForm = ref()

const onFinish = (values: any) => {
  console.log('Success:', values)
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}

const myState = reactive({
  smsSendFlag: false,
  time: 60,
})

// 获取验证码
const getSms = async () => {
  loginForm.value?.validateFields(['username']).then(async () => {
    let params = {
      phone: formState.username,
    }
    const hide = message.loading('验证码发送中..', 0)
    try {
      let { state, message: msg } = await userApi.sendRegSms(params)
      if (state === 200) {
        myState.smsSendFlag = true
        const interval = setInterval(() => {
          if (myState.time-- <= 0) {
            myState.time = 60
            myState.smsSendFlag = false
            clearInterval(interval)
          }
        }, 1000)
      } else {
        message.error(msg)
      }
    } catch (error) {
      message.error('验证码获取失败，请刷新后重试~')
    }
    setTimeout(hide, 1)
  })
}
</script>

<template>
  <div>
    <a-modal v-model:open="open" title="获取验证码" @ok="handleOk">
      <a-alert
        message="请获取验证码以进行身份验证，确保账号安全！"
        type="info"
        show-icon
        style="margin: 20px"
      />

      <a-form
        ref="loginForm"
        :model="formState"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item label="当前账号" name="username" :label-col="{ span: 4 }">
          <a-input v-model:value="formState.username" :disabled="true" style="width: 318px" />
        </a-form-item>

        <a-form-item label="验证码" name="code" :label-col="{ span: 4 }">
          <a-input v-model:value="formState.code" placeholder="验证码" style="width: 200px">
            <template #prefix><MailOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </a-input>
          <a-button
            :disabled="myState.smsSendFlag"
            v-text="(!myState.smsSendFlag && '获取验证码') || `${myState.time} s`"
            @click="getSms"
            style="margin-left: 15px; border-radius: 6px"
            type="primary"
          ></a-button>
        </a-form-item>
      </a-form>
    </a-modal>

    <SetWeChat ref="setWeChatRef"></SetWeChat>
  </div>
</template>

<style scoped lang="less"></style>
